<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :visible="visible"
    :destroyOnClose="true"
    :width="450"
    :body-style="{ paddingBottom: '80px' }"
    @close="closeModal"
  >
    <a-form layout="vertical">
      <a-form-item label="岗位组名称：" v-bind="validateInfos.groupName">
        <a-input
          placeholder="请输入岗位组名称"
          v-model:value="modelRef.groupName"
        />
      </a-form-item>
    </a-form>

    <div class="drawer-footer">
      <a-button class="mr-10" @click.prevent="closeModal">取消</a-button>
      <a-button type="primary" @click.prevent="onSubmit" :loading="loading"
        >保存</a-button
      >
    </div>
  </a-drawer>
</template>
<script>
import {
  defineComponent,
  computed,
  reactive,
  onMounted,
  watch,
  ref,
} from "vue";
import { Form, message } from "ant-design-vue";
import request from "@/common/utils/request";
const useForm = Form.useForm;

export default defineComponent({
  name: "EditPosts",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    // 当前编辑的部门id
    id: {
      type: [String, Number],
      default: 0,
    },
    val: {
      type: String,
      default: "",
    },
  },
  setup(props, context) {
    watch(
      () => props.visible,
      (newVal) => {
        if (newVal) {
          modelRef.groupName = props.val;
        }
      },
      { deep: true, immediate: true }
    );

    const title = computed(() => {
      return props.id == 0 ? "新增岗位组" : "编辑岗位组";
    });

    const modelRef = reactive({ groupName: "" });

    const rulesRef = reactive({
      groupName: [
        {
          required: true,
          message: "岗位组名称为必填项",
        },
      ],
    });

    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );
    const closeModal = () => {
      resetFields();
      context.emit("cancel");
    };
    const loading = ref(false);
    const onSubmit = () => {
      loading.value = true;
      validate().then(() => {
        if (props.id) {
          request
            .put("/org", "/post", { name: modelRef.groupName, id: props.id })
            .then((res) => {
              message.success(res.msg || "编辑成功！");
              context.emit("cancel", "submit");
            })
            .finally(() => {
              loading.value = false;
            });
        } else {
          request
            .post("/org", "/post", { name: modelRef.groupName, parent_id: 0 })
            .then((res) => {
              message.success(res.msg || "添加成功！");
              context.emit("cancel", "submit");
            })
            .finally(() => {
              resetFields();

              loading.value = false;
            });
        }
      });
    };

    return {
      closeModal,
      onSubmit,
      title,
      labelCol: { span: 5 },
      wrapperCol: {
        span: 14,
      },
      resetFields,
      validate,
      modelRef,
      validateInfos,
      loading,
    };
  },
});
</script>
